import Modal from "antd/lib/modal/Modal";
import React, { useEffect, useState } from "react";
import GuideBar from "../../component/GuideBar";
import LoginBox from "../../component/LoginBox";
import MainContent from "../../component/MainContent";
import { originUserInfo, UserInfo } from "../../interface/account";
import { ISingleArticle, ISort } from "../../interface/Article";
import { INotice } from "../../interface/notice";
import { ITab } from "../../interface/tab";
import { getUserInfo } from "../../service/account";
import { getArticles } from "../../service/article";
import { addHotSearches, getAllHotSearches } from "../../service/hotSearch";
import { getAllNotice } from "../../service/notice";
import cookieStore from "../../store/cookie";
import userStore from "../../store/user";

export default function HomePage() {
  // const navigate = useNavigate()
  const [articles, setArticles] = useState<ISingleArticle[]>([])
  const [articlesOffset, setArticlesOffset] = useState<number>(0)
  const [userName, setUserName] = useState<string>()
  const [showHotSearch, setShowHotSearch] = useState<string>("")
  const [userInfo, setUserInfo] = useState<UserInfo>(originUserInfo)
  const [showModal, setShowModal] = useState<boolean>(false)
  const [notices, setNotices] = useState<INotice[]>([])
  const [hsaMoreArticles, setHasMoreArticles] = useState<boolean>(true)
  const [keyWord, setKeyWord] = useState<string>('')
  const [tab, setTab] = useState<ITab>()
  const [sort, setSort] = useState<ISort>('time')

  useEffect(() => {
    let STATE = 1
    if (STATE) {
      const storedName = userStore.getState()
      if (typeof (storedName) === "string") {
        getNickname(storedName)
      } else {
        const localName = sessionStorage.getItem("stageUser")?.toString()
        if (!!localName) {
          getNickname(localName)
        }
      }
      setArticles([])
      initGetHotSearch()
      getNotices()
    }
    return () => {
      STATE = 0
    }
    // eslint-disable-next-line
  }, [])

  useEffect(() => {
    if (articles.length === 0 && hsaMoreArticles) {
      getArticleList()
    }
    // eslint-disable-next-line
  }, [articles])

  useEffect(() => {
    setArticles([])
    setArticlesOffset(0)
    setHasMoreArticles(true)
    if (!!keyWord) {
      addHotSearches({ content: keyWord })
    }
  }, [keyWord, tab, sort])

  async function getNickname(account: string) {
    const data = await getUserInfo({ account: account }, cookieStore.getState().toString())
    if (data.stat === 'ok') {
      const nickname = data.data.nickname
      setUserName(nickname)
      setUserInfo(data.data)
    }
  }

  // placeholder滚动效果
  async function initGetHotSearch() {
    const hotSearches = await getAllHotSearches()
    let i = 0
    setInterval(() => {
      setShowHotSearch(hotSearches.data.map((item: { content: string, id: string, statu: 1 | 0, times: number }) => item.content)[i % hotSearches.data.length])
      i = i + 1
    }, 2000)
  }


  function init() {
    setArticlesOffset(0)
    setArticles([])
    setHasMoreArticles(true)
  }

  async function getNotices() {
    const data = await getAllNotice()
    if (data.stat === 'ok') {
      setNotices(data.data)
    } else {
      setNotices([])
    }
  }

  async function getArticleList() {
    const data = await getArticles({ sort: sort, offset: articlesOffset, keyword: keyWord, limit: 10, tab: tab?.lable })
    if (data.stat === 'ok') {
      const getLength = data.data.length
      if (getLength + articlesOffset === data.data.total) {
        setHasMoreArticles(false)
      } else {
        setHasMoreArticles(true)
      }
      setArticlesOffset(articlesOffset + getLength)
      setArticles([...articles, ...data.data.data])
      return true
    } else {
      return false
    }
  }



  return (
    <React.Fragment>
      <GuideBar setKeyWord={(value: string) => setKeyWord(value)} interrap={() => { setShowModal(true) }} userName={userName || "登录/注册"} showHotSearch={showHotSearch} getData={() => { getArticleList() }} init={() => { init() }} />
      <MainContent setSort={(sort: ISort) => setSort(sort)} setTab={(tab: ITab | undefined) => setTab(tab)} hasMoreArticles={hsaMoreArticles} notices={notices} interrap={() => { setShowModal(true) }} hostInfo={userInfo} articleList={articles} getData={() => { getArticleList() }} init={() => { init() }} />
      <Modal onCancel={() => { setShowModal(false) }} footer={null} visible={showModal}>
        <LoginBox afterLogin={() => { setShowModal(false); window.location.reload() }} />
      </Modal>
    </React.Fragment>
  )
}
